import React, { memo } from 'react';
import type { FC, ReactNode } from 'react';
import { AreaHeaderV2Wrapper } from './style';
import { NavLink } from 'react-router-dom';

interface IProps {
  children?: ReactNode;
  title: string;
  moreText?: string,
  moreLink?: string
}

const AreaHeaderV2: FC<IProps> = (props) => {
  const { title, moreText, moreLink } = props;
  return (
    <AreaHeaderV2Wrapper>
      <div className='left'>
        <span>{title}</span>
      </div>
      <div className='right'>
        {moreText && moreLink && <NavLink to={moreLink}>{moreText}</NavLink>}
      </div>
    </AreaHeaderV2Wrapper>
  );
};

export default memo(AreaHeaderV2);